<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #6ff;
    }
  </style>
</head>

<body>
  <!-- id="box" class="one two three" title="hello"  属性节点 -->
  <!-- JS获取和设置属性节点(标签内)   box.getAttribute("class") -->
  <div id="box" class="one two three" title="hello">
    <span>1231231</span>
  </div>
</body>
<script>
  //元素节点的属性
  var box = document.querySelector("#box");
  console.log(box);

  // 元素节点  => 本质都是一个对象 =>对象中存在很多修饰元素节点的属性(键值对)
  console.dir(box); //打印对象或函数的详细属性和方法

  // 元素节点的属性
  // innerHTML 获取和设置元素内的html结构
  // innerText 获取和设置元素内的文本结构

  // textContent 获取和设置元素内的文本结构
  // outerHTML   获取和设置元素本身及其内部的HTML结构 
  // outerText   获取和设置元素本身及其内部的text结构

  // console.log(box.innerHTML);
  // console.log(box.innerText);
  // console.log(box.textContent);

  // console.log(box.outerHTML);
  // box.outerHTML = "<h2>1232123</h2>";

  // console.log(box.outerText);

  // tagName   返回元素的标签名 (大写)
  // console.log(box.tagName);

  // id     获取和设置元素的 id 
  // console.log(box.id); // 元素节点的属性(元素自带的属性修饰)
  // box.id = "haha";     //修改时也会影响标签内的属性节点

  // className  获取和设置元素class名(整个属性值)
  // console.log(box.className);
  // box.className = "heihei";

  // classList  获取由class组成的集合(伪数组)
  // console.log(box.classList);
  // console.log(Array.from(box.classList));  //  伪数组 转真数组

  // title      获取和设置元素title名
  // console.log(box.title);
  // box.title = "Are you Ok!";

  // style      获取和设置元素的内联样式

  // console.log(box.style);  // 也是一个由css属性形成对象 {}
  // box.style.background

  // 设置
  box.style.background = "red";
  // box.style.width = "400px";
  // box.style.height = "400px";

  // 只能获取内联样式  => 无法获取内部 外部和默认样式!!!
  console.log(box.style.width);
  console.log(box.style.height);







</script>

</html>